<template>
  <div>
    <van-button type="primary" @click="gaoliang('red')">必说项</van-button>
    <van-button type="primary" @click="gaoliang('blue')">重点语句</van-button>
    <van-button type="primary" @click="gaoliang('pink')">营销技巧</van-button>
    <div id="huaciDom" v-html="huaciHtml" @contextmenu.prevent></div>
    <van-field v-model="value" label="文本" placeholder="请输入用户名" />
    <van-button type="primary" @click="getDom">获取dom</van-button>
    <div>{{domValue}}</div>
  </div>
</template>

<script>
import Highlighter from "web-highlighter";
const highlighter = new Highlighter();
export default {
  data() {
    return {
      huaciHtml: "话束带结发尽快DBFJK手打阿九东方红郡；是DGJS价格高时代峻峰吧",
      value: '',
      domValue: '',
    };
  },
  methods: {
    getDom(){
      this.domValue = document.getElementById('huaciDom').innerHTML
    },
    gaoliang(className) {
      // 获取选中的文本
      setTimeout(() => {
        const selection = window.getSelection();
        if (selection.toString()) {
          highlighter.setOption({
            style: {
              className: className,
            },
          });
          highlighter.fromRange(selection.getRangeAt(0));
          window.getSelection().removeAllRanges();
        } else {
          alert("请选择文本");
        }
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
#huaciDom {
  font-size: 14px;
  padding: 30px;
  background: pink;
}
/deep/.red {
  color: #ff3131;
}
/deep/.blue {
  color: #0569ff;
}
/deep/.pink {
  color: purple;
}
</style>
